<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的吃了么 - 个人资料</title>
    <link rel="stylesheet" href="css/reception/baseInfoSet.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入 bootstrap的 css -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}"/>
    <!-- 引入分页插件pagination的css样式文件 -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/pagination-2.1.5/css/pagination.css}">
    <!-- 引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架 -->
    <script type="text/javascript" th:src="@{plugins/jquery-3.6.0/jquery-3.6.0.min.js}"></script>
    <!-- 引入 bootstrap的js -->
    <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>
    <!-- 引入假分页控件pagination的js -->
    <script type="text/javascript" th:src="@{plugins/pagination-2.1.5/js/pagination.min.js}"></script>
    <!-- 引入自己写的js -->
    <script th:src="@{js/baseInfoSet.js}" type="text/javascript"></script>
</head>
<body>
<!-- 顶部开始 -->
<div class="top">
    <div class="header">
        <div class="top-left">
            <font size="4px" color="red">欢迎来到稻香商城!</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">加入我们</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">帮助中心</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="jump?pg=reception/chat">联系客服</a>&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="top_right">
            <a href="jump?pg=reception/index">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="loginUser" hidden="hidden" th:text="${session.loginUser==null?'':session.loginUser.getNickname()}"></span>
            <a href="jump?pg=reception/login" id="sessionName"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="jump?pg=reception/register">免费注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">我的订单</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a target="_blank" id="shoppingCar">购物车<img src="/img/gowuchetubiao.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">会员中心</a>
        </div>
    </div>
</div>
<div class="work">
    <div class="header_1">
        <img src="/img/dingbu.jpg" width="100%" height="100%">
    </div>
</div>
<!--顶部结束 -->
<div class="container">
    <h1>个人资料</h1>
    亲爱滴<span th:text="${session.loginUser.getNickname()}"></span>，填写真实的资料，有助于好友找到你哦。<a onclick="showAddReceivingAddressModal()">添加收货地址</a>&nbsp;&nbsp;<a onclick="showReceivingAddressModal()">设置默认收货地址</a><br /><br />
    <form id="updateForm" action="" method="" class="form-horizontal" enctype="multipart/form-data">
        <!-- 隐藏表单域：用于存储记录的id值 -->
        <input type="hidden" id="uid" name="uid" th:value="${session.loginUser.getUid()}">
        <!-- 用户名、密码 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-3">
                <input type="text" id="account_edit" name="account" class="form-control">
                <span class="help-block m-b-none" id="account-label" style="color: #ff0000"></span>
            </div>

            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-3">
                <input type="password" id="password" name="password" class="form-control">
                <!-- <span class="help-block m-b-none">密码由字母、数字、特殊符号组成</span> -->
                <span class="help-block m-b-none" id="password-label" style="color: red"></span>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <!-- 真实姓名、昵称 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">真实姓名</label>
            <div class="col-sm-3">
                <input type="text" id="truename" name="truename" class="form-control">
                <span class="help-block m-b-none" id="truename-label" style="color: #ff0000"></span>
            </div>

            <label class="col-sm-2 control-label">昵称</label>
            <div class="col-sm-3">
                <input type="text" id="nickname" name="nickname" class="form-control">
                <span class="help-block m-b-none" id="nickname-label" style="color: red"></span>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <!-- 所在地 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">所在地</label>
            <div class="col-sm-2">
                <select class="form-control" id="province" name="province"
                        onchange="getCityByProId(this.value)"></select>
            </div>
            <label class="col-sm-1"></label>
            <div class="col-sm-2">
                <select class="form-control" id="city" name="city" onchange="getDistrictByCityId(this.value)"></select>
            </div>
            <label class="col-sm-1"></label>
            <div class="col-sm-2">
                <select class="form-control" id="district" name="district"></select>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <!-- 详细地址、性别 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">详细地址</label>
            <div class="col-sm-3">
                <input type="text" id="address_edit" name="address" class="form-control">
                <span class="help-block m-b-none" id="address-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-3">
                <label class="radio-inline"><input type="radio" name="sex" id="sex1" value="男" checked>男</label>
                <label class="radio-inline"><input type="radio" name="sex" id="sex2" value="女">女</label>
                <span class="help-block m-b-none" id="sex-label" style="color: red"></span>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <!-- 邮编、联系电话 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">邮编</label>
            <div class="col-sm-3">
                <input type="text" id="postcode" name="postcode" class="form-control">
                <span class="help-block m-b-none" id="postcode-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-3">
                <input type="text" id="tel_edit" name="tel" class="form-control">
                <span class="help-block m-b-none" id="tel-label" style="color: red"></span>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <!-- 出生日期、头像 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">出生日期</label>
            <div class="col-sm-3">
                <input type="date" id="birth" name="birth" placeholder="选择出生日期" class="form-control">
                <span class="help-block m-b-none" id="birth-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">头像</label>
            <div class="col-sm-3">
                <!-- 因为文件要使用 MultipartFile 进行映射，所以不要和实体类的属性名，保持一致 -->
                <input type="file" id="photo" name="file_photo" class="form-control">
                <span class="help-block m-b-none" id="photo-label" style="color: red"></span>
            </div>
        </div>
    </form>
    <div style="width: 100%; text-align: center">
        <button id="save" type="button" class="btn btn-primary" onclick="validForm()">保存</button>
    </div>
</div>

<!-- ======================查询收货地址弹出模态框 modal====================== -->
<div id="queryReceivingAddressModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel2">查看收货地址</h4>
            </div>
            <div class="modal-body">
                <!-- 这里放置 modal 的表单 start -->
                <div class="outer" id="showMsg"></div>
                <div id="queryPager"></div>
                <!-- 这里放置 modal 的表单 end -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveRA2" type="button" class="btn btn-primary" onclick="exit()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!-- ======================新增和修改收货地址弹出模态框 modal====================== -->
<div id="insertAndUpdateReceivingAddressModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">新增收货地址</h4>
            </div>
            <div class="modal-body">
                <!-- 这里放置 modal 的表单 start -->
                <div class="ibox-content">
                    <form id="insertForm" action="" method="" class="form-horizontal">
                        <!-- 隐藏表单域：用于存储记录的id值 -->
                        <input type="hidden" id="rauid" name="rauid" th:value="${session.loginUser.getUid()}">
                        <input type="hidden" id="rid" name="rid">
                        <!-- 所在地 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所在地</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="raprovince" name="province" onchange="getCityByProId2(this.value)"></select>
                            </div>
                            <label class="col-sm-1"></label>
                            <div class="col-sm-2">
                                <select class="form-control" id="racity" name="city" onchange="getDistrictByCityId2(this.value)"></select>
                            </div>
                            <label class="col-sm-1"></label>
                            <div class="col-sm-2">
                                <select class="form-control" id="radistrict" name="district"></select>
                            </div>
                        </div>

                        <!-- 详细地址 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-3">
                                <input type="text" id="raaddress" name="address" class="form-control">
                                <span class="help-block m-b-none" id="raaddress-label" style="color: red"></span>
                            </div>
                        </div>

                        <!-- 联系电话 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-3">
                                <input type="text" id="ratel" name="tel" class="form-control">
                                <span class="help-block m-b-none" id="ratel-label" style="color: red"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 这里放置 modal 的表单 end -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveRA" type="button" class="btn btn-primary" onclick="distribution()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
